<template>
  <van-dialog
    v-model:show="showSortDialog"
    :before-close="onBeforeClose"
    show-cancel-button
    teleport="body"
    title="数据排序"
  >
    <div class="data-sort-dialog">
      <van-radio-group v-model="sortMethod">
        <van-cell-group inset title="排序方法">
          <van-cell
            v-for="{ displayName, method } in sortMethodAllList"
            :key="method"
            :title="displayName"
            clickable
            @click="onSelectSortMethod(method)"
          >
            <template #right-icon>
              <van-radio :name="method" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>

      <van-radio-group v-model="sortProperty">
        <van-cell-group inset title="排序属性">
          <div style="max-height: 40vh; overflow: auto">
            <van-cell
              v-for="{ displayName, property } in sortPropertyAllList"
              :key="property"
              :title="displayName"
              clickable
              @click="onSelectSortProperty(property)"
            >
              <template #right-icon>
                <van-radio :name="property" />
              </template>
            </van-cell>
          </div>
        </van-cell-group>
      </van-radio-group>
    </div>
  </van-dialog>
</template>

<script lang="ts" setup>
import { useRouterStore } from '@/framework/store/router'
import { showError } from '@/framework/common/notify'
import { QuerySortType } from '@/framework/types/portal'

const props = defineProps<{
  modelValue: boolean
  items: Array<any>
}>()
const { modelValue } = toRefs(props)
let showSortDialog = ref(modelValue.value)
watch(
  () => modelValue.value,
  () => (showSortDialog.value = modelValue.value)
)
const routerStore = useRouterStore()
const emit = defineEmits<{
  (e: 'onSortData', sortCondition: Array<QuerySortType>): void
  (e: 'update:modelValue', value: any): void
}>()

const sortPropertyAllList = computed(() =>
  props.items
    .filter((item: any) => item.sortAble === '1')
    .map((item: any) => ({
      property: item.property,
      displayName: item.displayName
    }))
)

const onConfirmFilter = () => {
  const property = sortProperty.value
  const type = sortMethod.value
  if (!type || !property) {
    showError('请确保同时选择了排序属性和排序方法')
    return false
  }
  emit('onSortData', [{ property, type: +type as 0 | 1 }])
  return true
}

const onBeforeClose = (action: string) => {
  if (action === 'confirm') return new Promise<boolean>((resolve) => resolve(onConfirmFilter()))
  return true
}

const sortMethodAllList = ref([
  { displayName: '升序（从小到大）', method: '0' },
  { displayName: '降序（从大到小）', method: '1' }
])

let sortMethod = ref('0')
let sortProperty = ref('')

const onSelectSortProperty = (property: string) => (sortProperty.value = property)

const onSelectSortMethod = (method: string) => (sortMethod.value = method)

watch(
  () => showSortDialog.value,
  () => {
    emit('update:modelValue', showSortDialog.value)
    routerStore.blockReturn(showSortDialog.value, () => (showSortDialog.value = false))
  },
  { immediate: true }
)
</script>

<style scoped>
.rotate90 {
  rotate: 90deg;
}

.data-sort-dialog {
  width: 100%;
  height: 100%;
  background-color: #f7f8fa;
  padding: 2vh 0;
}
</style>
